<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>

<!-- 导入公有的header -->
<head th:include="common/head::header"/>


<body class="hold-transition skin-blue sidebar-mini">

<link rel="stylesheet" th:href="@{/plug-in/adminLTE/hammer/css.css}">

<script th:src="@{/plug-in/adminLTE/hammer/hammer.js}"></script>

        <div class="row">
            <div class="col-md-12">
                鼠标滚轴：
                <button type="button" onclick="mouseRollerUP();" class="btn btn-primary">向上<i class="fa fa-arrow-up"></i></button>
                <button type="button" onclick="mouseRollerDown()" class="btn btn-primary ">向下<i class="fa fa-arrow-down"></i></button>
            </div>
            <div class="col-md-12">
                <div id="touchme"></div>
            </div>
            <div class="col-md-12">
                鼠标动作：
                <button type="button" onclick="mouseButOne();" class="btn btn-primary">单击<i class="fa fa-mars"></i></button>
                <button type="button" onclick="mouseButDouble()" class="btn btn-primary ">双击<i class="fa fa-mars-double"></i></button>
                <button type="button" onclick="mouseButRight()" class="btn btn-primary ">右键<i class="fa fa-transgender"></i></button>
            </div>
            <div class="col-md-12">
                鼠标指针：
                <button type="button" onclick="mouseMoveUP();" class="btn btn-primary"><i class="fa fa-arrow-up"></i></button>
                <button type="button" onclick="mouseMoveDown()" class="btn btn-primary "><i class="fa fa-arrow-down"></i></button>
                <button type="button" onclick="mouseMoveLeft()" class="btn btn-primary "><i class="fa fa-arrow-left"></i></button>
                <button type="button" onclick="mouseMoveRigth()" class="btn btn-primary "><i class="fa fa-arrow-right"></i></button>
            </div>
        </div>
    <script type="application/javascript">
        //https://github.com/hammerjs/hammer.js
        var myElement = document.getElementById('touchme');

        // create a simple instance
        // by default, it only adds horizontal recognizers
        var mc = new Hammer(myElement);

        // let the pan gesture support all directions.
        // this will block the vertical scrolling on a touch-device while on the element
        mc.get('pan').set({ direction: Hammer.DIRECTION_ALL,threshold: 0  });
        mc.get('pinch').set({ enable: true });
        mc.get('rotate').set({ enable: true });
        mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

        // listen to events...
        mc.on("panleft panright panup pandown tap press pinch swipe doubletap", function(e) {
            //事件
            // console.log(e);
             var obj = new Object();
             obj.type = e.type;
             obj.distance =e.distance;
             obj.deltaX = e.deltaX;
             obj.deltaY =e.deltaY;
             obj.angle =e.angle;
             obj.direction =e.direction;
             obj.eventType = e.eventType;
             obj.pointerType = e.pointerType;
            obj.centerX = e.center.x;
            obj.centerY = e.center.y;
            obj.deltaTime = e.deltaTime;
            obj.rotation  =e.rotation;
            obj.scale = e.scale;
             var json_str = JSON.stringify(obj);
            // console.log(json_str);
            mousePointMove(json_str);
        });

    </script>



    <!-- /.content -->
    <script type="application/javascript">
        //发送鼠标指针命令
        function mousePointMove(point){
            parent.sendMouseCmd('MOVE_CMD',point);
        }
        //鼠标滚轴，向上
        function mouseRollerUP(){
            parent.sendMouseCmd('MOUSE_ROLLER','UP');
        }
        //鼠标滚轴，向上
        function mouseRollerDown(){
            parent.sendMouseCmd('MOUSE_ROLLER','DOWN');
        }
        //左键单击
        function mouseButOne(){
            parent.sendMouseCmd('MOUSE_BUT','One');
        }
        //左键双击
        function mouseButDouble(){
            parent.sendMouseCmd('MOUSE_BUT','Double');
        }
        //右键
        function mouseButRight(){
            parent.sendMouseCmd('MOUSE_BUT','Right');
        }


        function mouseMoveUP(){
            parent.sendMouseCmd('MOUSE_POINT_MOVE','UP');
        }
        function mouseMoveDown(){
            parent.sendMouseCmd('MOUSE_POINT_MOVE','DOWN');
        }
        function mouseMoveLeft(){
            parent.sendMouseCmd('MOUSE_POINT_MOVE','LEFT');
        }
        function mouseMoveRigth(){
            parent.sendMouseCmd('MOUSE_POINT_MOVE','RIGHT');
        }


        window.addEventListener('contextmenu', function (e) {
          e.preventDefault();
         });
    </script>
</body>
</html>
